<template>
	<div class="news">
		<div class="dib">
			<h3>{{title}}</h3>
			<h4>{{subtitle}}</h4>
		</div>
		<ul>
			<li v-for="d in news">
				<a :class="d.theme" :href="d.url" target="_blank">
					<span>{{d.updateTime}}</span>{{d.infoTitle}}
				</a>
			</li>
			<li class="more">
				<a>查看更多 >> </a>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props: ['title', 'subtitle', 'news'],
	};
</script>

<style lang="scss">
	.news {
		padding: 0 36px 10px;
		text-align: center;
		&+ & {
			border-left: 1px dashed #dbdbdb;
		}
		h3 {
			color: #3b3f47;
			font-size: 20px;
			line-height: 28px;
			margin-bottom: 4px;
			position: relative;
			text-align: right;
			&:before,
			&:after {
				border-radius: 50%;
				content: '';
				height: 5px;
				left: 100%;
				margin-left: 3px;
				position: absolute;
				top: 50%;
				width: 5px;
			}
			&:before {
				background-color: #0093F1;
				margin-top: -7px;
			}
			&:after {
				background-color: #FF4FA1;
				margin-top: 2px;
			}
		}
		h4 {
			/*color: $pinkish-grey;*/
			font-family: 'Helvetica';
			font-size: 12px;
			line-height: 14px;
			margin-bottom: 15px;
			text-align: right;
		}
		ul {
			border-top: 1px dashed #f2f2f2;
			padding-top: 18px;
			height: 169px;
			position: relative;
			.more {
				bottom: 10px;
				padding-left: 0px;
				position: absolute;
				a {
					color: #0093F1;
					font-size: 13px;
				}
			}
		}
		a {
			color: #7c7c7c;
			display: block;
			font-size: 13px;
			line-height: 26px;
			height: 26px;
			text-align: left;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			&:hover {
				color: #0093F1;
				cursor: pointer;
			}
			&.primary {
				/*color: $bright-sky-blue;*/
			}
			&.danger {
				color: #fb6807;
			}
			span {
				color: #cbcbcb;
				/*font-family: 'FZLTHK-GBK1-0';*/
				font-size: 12px;
				float: right;
			}
		}
	}
</style>